<template>
  <div class="home">
    <mobile-head v-if="isMobile"></mobile-head>
    <head-nav v-else></head-nav>
    <div style="position: relative">
      <head-top></head-top>
      <time-line></time-line>
      <event-host></event-host>
      <main-mentors></main-mentors>
      <main-media></main-media>
      <main-themes></main-themes>
      <main-registration></main-registration>
      <main-footer></main-footer>
      <img src="@/assets/images/bg.png" alt="" class="bg1" />
      <img src="@/assets/images/bg.png" alt="" class="bg2" />
      <img src="@/assets/images/bg.png" alt="" class="bg3" />
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useWindowSize } from '@vueuse/core'
import HeadNav from './components/HeadNav.vue'
import MobileHead from './components/MobileHead.vue'
import HeadTop from './components/HeadTop.vue'
import TimeLine from './components/TimeLine.vue'
import EventHost from './components/EventHost.vue'
import MainMentors from '@/components/MainMentors'
import MainMedia from '@/components/MainMedia'
import MainThemes from '@/components/MainThemes'
import MainRegistration from '@/components/MainRegistration'
import MainFooter from './components/MainFooter.vue'

const WIDTH = 1180
const isMobile = ref(false)
const { width } = useWindowSize()

watchEffect(() => {
  if (width.value - 1 < WIDTH) {
    isMobile.value = true
  } else {
    isMobile.value = false
  }
})
</script>

<style lang="scss" scoped>
.home {
  width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
  .bg1,
  .bg2,
  .bg3 {
    position: absolute;
    pointer-events: none;
    width: 1000px;
  }
  .bg1 {
    top: -200px;
    left: -350px;
  }
  .bg2 {
    top: 3100px;
    right: -100px;
  }
  .bg3 {
    top: 6300px;
    left: -300px;
  }
}
@media screen and (max-width: 1180px) {
  .home {
    width: 100%;
    padding: 0 30px 60px;
    overflow-y: auto;
    overflow-x: hidden;
    .bg1,
    .bg2,
    .bg3 {
      width: 500px;
    }
    .bg1 {
      top: -200px;
      left: -250px;
    }
    .bg2 {
      display: none;
    }
    .bg3 {
      display: none;
    }
  }
}
</style>
